<template>
	<div class="writeallorder">
		<div class="top"></div>
		<!--<mt-header title="填写调拨单"  class='head' >
		<router-link to="/applydetail" slot="left">
		    <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
		 </router-link>
		</mt-header>-->
		<x-header  class='head' :left-options="{backText: ''}">填写调拨单</x-header>
		<div class="kong"></div>
		<div class="apply">
			<div class="apply-c">
			<div class="apply-title">
				调拨明细
			</div>
			<!--<div class="choice">
			<div class="choice-c">
			<span>调出单位<i class="xing">*</i></span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择调出单位</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>

	        <div class="choice" style="border-bottom: 0;">
			<div class="choice-c">
			<span>调出人姓名</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择联系人</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>

	        <div class="choice">
			<div class="choice-c">
			<span>调出人电话</span>
	        <input type="tel" />
			</div>
	        </div>



	        <div class="choice">
			<div class="choice-c">
			<span>调入单位<i class="xing">*</i></span>
	        <select class="choice-k">
			  <option value ="上海庞源">上海庞源</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>


	        <div class="choice" style="border-bottom: 0;">
			<div class="choice-c">
			<span>调入人姓名<i class="xing">*</i></span>
	        <select class="choice-k">
			  <option value ="张三">张三</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>


	        <div class="choice">
			<div class="choice-c">
			<span>调入人电话</span>
	        <input type="tel"  value="131344567889" />
			</div>
	        </div>


	        <div class="choice" style="border-bottom: 0;">
			<div class="choice-c">
			<span>调入项目<i class="xing">*</i></span>
	        <select class="choice-k">
			  <option value ="A仓库">A仓库</option>
			  <option value ="主机">主机</option>
			</select>
			</div>
	        </div>

	        <div class="adress choice">
			<div class="adress-c  choice-c">
			<div style="width: 42.5%;float: left;font-size: .8rem;color: #606063;line-height: 2rem;">项目地址</div>
	        <textarea  placeholder="地址" type="textarea" rows="5"  class="text"></textarea>
			</div>
	        </div>




	        <div class="adress choice" style="border-bottom: 0;">
			<div class="adress-c  choice-c">
			<div style="width: 42.5%;float: left;font-size: .8rem;color: #606063;line-height: 2rem;">备注</div>
	        <textarea  placeholder="备注" type="textarea" rows="5"  class="text"></textarea>
			</div>
	        </div>-->


			<group gutter='0px'>
		    <popup-picker class='popup' title="调出单位" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
		    <cell class='popup' title="调出人姓名" value="diaochu">
		    	<router-link :to="{path:'/writeallorderdiaochu'}" style='color: #999;'>请选择调出人</router-link>
		    </cell>
		    <x-input class='popup' title="调出人电话" v-model="valuep1"></x-input>
            <popup-picker class='popup' title="调入单位" :data="list3" v-model="value3" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
            <cell class='popup' title="调入人姓名" value="diaoru">
		    	<router-link :to="{path:'/writeallorderdiaoru'}" style='color: #999;'>请选择调入人</router-link>
		    </cell>
            <x-input class='popup' title="调入人电话" v-model="valuep2"></x-input>
            <cell class='popup' title="调入项目" value="gongcheng">
		    	<router-link :to="{path:'/writeallorderengin'}" style='color: #999;'>请选择调入项目</router-link>
		    </cell>
            <x-textarea class='popup' title="项目地址:"  placeholder='项目地址'></x-textarea>
		    <x-textarea class='popup' title="备注:"  placeholder='备注' value='上海市长宁区淞虹路968号'></x-textarea>
		    </group>
			</div>
		</div>

		<div class="info">
				<p class="_xian">设备信息<span><button class="remove ">删除</button></span></p>
			<div class="info-c">

				<p class="hui">设备类型：<i class="hei">主机</i></p><span class="hui">设备名称：<i class="lan">塔式起重</i></span>
				<p class="hui">主机型号：<i class="lan">PY67899977</i></p><span class="hui">物料号：<i class="lan">13412412</i></span>
				<p class="hui">设备单位：<i class="hei">台</i></p><span class="hui">申请数量：<i class="lan">2</i></span>
				<i class="hui">备注：<i class="hei">其二企鹅的全额返还我姐夫你问</i></i>
			</div>
		</div>

		<div class="info">
				<p class="_xian">设备信息<span><button class="remove ">删除</button></span></p>
			<div class="info-c">

				<p class="hui">设备类型：<i class="hei">主机</i></p><span class="hui">设备名称：<i class="lan">塔式起重</i></span>
				<p class="hui">主机型号：<i class="lan">PY67899977</i></p><span class="hui">物料号：<i class="lan">13412412</i></span>
				<p class="hui">设备单位：<i class="hei">台</i></p><span class="hui">申请数量：<i class="lan">2</i></span>
				<i class="hui">备注：<i class="hei">其二企鹅的全额返还我姐夫你问</i></i>
			</div>
		</div>

		<router-link :to="{path:'/addment'}" style='color: #000;'>
		<div class="info btn">
				<button class="add">+添加/编辑设备</button>
		</div>
		</router-link>


		<div style="height: 6rem;"></div>

		<button class="queren">调拨</button>


	</div>
</template>

<script>
import PopupPicker from 'vux/src/components/Popup-picker/index'
import Group from 'vux/src/components/group/index'
import XInput from 'vux/src/components/x-input/index'
import XTextarea from 'vux/src/components/x-textarea/index'
import Datetime from 'vux/src/components/datetime/index'
import { XHeader, Cell } from 'vux'

export default {
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XHeader
  },
  data() {
    return {
      diaochu: '',
      diaoru: '',
      gongcheng: '',
      valuep1: '',
      valuep2: '131454334456',
      valuedata: '2015-11-12',
      value1: ['请选择调出单位'],
      value2: ['请选择调出人姓名'],
      value3: ['上海xxxxx'],
      value4: ['张三'],
      value5: ['A仓库'],
      list1: [['主机', '主机配件', '111', '222', '333']],
      list2: [['主机', '主机配件', '111', '222', '333']],
      list3: [['在用', '闲置']],
      list4: [['张三', '李四', '111', '222', '333']],
      list5: [['A仓库', 'B仓库', '111', '222', '333']]
    }
  },
  methods: {
    onChange(val) {
      console.log('val change', val)
    },
    change(value) {
      console.log('change', value)
    },
    onShow() {
      console.log('on show')
    },
    onHide(type) {
      console.log('on hide', type)
    }
  }
}
</script>

<style scoped>
.apply {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 26.7rem;
}
.apply-c {
  color: #606063;
}
.apply-title {
  line-height: 2rem;
  font-size: 0.8rem;
  padding-left: 15px;
  background: #f8f6f7;
  border-radius: 6px 6px 0 0;
}
.choice {
  width: 100%;
  height: 2rem;
  background: #fff;
  color: #606063;
  border-bottom: 1px solid #f5f5f5;
}
.choice span {
  line-height: 2rem;
  font-size: 0.8rem;
}
.choice-k {
  width: 60%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
}
.choice-k option {
  font-size: 0.8rem;
}
.choice-c input {
  border: none;
  width: 57.7%;
  float: right;
  height: 2rem;
  font-size: 0.8rem !important;
  color: #606063;
}
.adress {
  height: 4.7rem;
}
.info {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 1rem;
}
.info-c {
  padding: 0.5rem;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.8rem;
}
.info-c p {
  display: inline-block;
  width: 50%;
  line-height: 1.8rem;
}
.info-c span {
  display: inline-block;
  width: 50%;
  line-height: 1.8rem;
}
.info-c b {
  font-weight: 500;
}
.remove {
  width: 4rem;
  background: #ff9800;
  color: #fff;
  border: none;
  height: 1.5rem;
  border-radius: 4px;
  line-height: 1.8rem;
  float: right;
}
.add {
  width: 100%;
  height: 2.5rem;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: #03a9f4;
}
.btn {
  margin-top: 1rem;
}
.queren {
  width: 100%;
  height: 2.5rem;
  position: fixed;
  bottom: 0;
  background: #4a82c6;
  color: #fff;
  border: none;
}
.hui {
  color: #606063;
}
.hei {
  color: #606063;
}
.lan {
  color: #1e82d2;
}
._xian {
  border-bottom: 1px dashed #d5d5d5;
  line-height: 1.8rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  font-size: 0.8rem;
}
.top {
  z-index: 9999999;
}
.head {
  z-index: 9999999;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.25rem;
  background: #1e82d2;
}
.head {
  position: fixed;
  top: 1.25rem;
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
}
.kong {
  height: 4.25rem;
}
select {
  font-size: 0.8rem !important;
  color: #606063;
}
.text {
  float: left;
  width: 57.5%;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
  margin-top: 0.5rem;
}
.popup {
  font-size: 0.8rem !important;
  color: #606063 !important;
}
</style>
